import React from "react";
import { Collapse, Tag, List } from "antd-mobile";
import styles from "../css/train.module.css";
import { ListItem } from "antd-mobile/es/components/list/list-item";
import { useNavigate, useSearchParams } from "react-router-dom";

function Collapses(props) {
  console.log(props);
  let [sp] = useSearchParams();
  const seatType = ["ssoftSeat", "fsoftSeat", "businessSeat"];
  console.log(props["ssoftSeat"].price);
  const seatTypeCN = ["二等座", "一等座", "商务座"];
  let nav = useNavigate();
  const goOrder = (seatType, price) => {
    nav(`/order?seatType=${seatType}&price=${price}&date=${sp.get("date")}`, {
      state: props,
    });
  };
  return (
    <div>
      <Collapse
        accordion
        arrowIcon={(active) =>
          active ? (
            <Tag className={styles.collTag} color="#ff6430" fill="outline">
              收起
            </Tag>
          ) : (
            <Tag className={styles.collTag} color="#ff6430" fill="outline">
              预订
            </Tag>
          )
        }
      >
        {seatType.map((item, index) => {
          return (
            <Collapse.Panel
              key={index}
              title={
                <div>
                  <span>{seatTypeCN[index]}</span>
                  <span className={styles.price}>￥{props[item].price}</span>
                  <span className={styles.yp}>
                    {props[item].ticketNum}
                    {typeof props[item].ticketNum === "number" ? "张" : ""}
                  </span>
                </div>
              }
            >
              <List
                style={{ "--border-bottom": "none", "--border-top": "none" }}
              >
                <List.Item
                  className={styles.hs}
                  arrowIcon={
                    <Tag
                      className={styles.collTag}
                      color="#ff6430"
                      fill="outline"
                      onClick={() =>
                        goOrder(seatTypeCN[index], props[item].price)
                      }
                    >
                      出票
                    </Tag>
                  }
                  description="含40元出行保障 快速出票 迅速无忧"
                >
                  快速预定
                </List.Item>
                <List.Item
                  className={styles.hs}
                  arrowIcon={
                    <Tag
                      className={styles.collTag}
                      color="#ff6430"
                      fill="outline"
                      onClick={() =>
                        goOrder(seatTypeCN[index], props[item].price)
                      }
                    >
                      出票
                    </Tag>
                  }
                  description="出票较慢，高峰期需要排队"
                >
                  普通预定
                </List.Item>
              </List>
            </Collapse.Panel>
          );
        })}
      </Collapse>
    </div>
  );
}

export default Collapses;
